<template>
  <div class="menu-card-box" :class="{'card': title == 'card'}">
    <router-link :to="'/' + routerLeft" @click.native="onCfrom(cfromLeft)">
      <div class="item-left" :class="{ active: $route.name === routerLeft }">
        {{ titleLeft }}
      </div>
    </router-link>
    <router-link v-if="title == 'card'" :to="'/' + routerCenter" @click.native="onCfrom(cfromLeft)">
      <div class="item-center" :class="{ active: $route.name === routerCenter }">
        {{ titleCenter }}
      </div>
    </router-link>
    <router-link :to="'/' + routerRight" @click.native="onCfrom(cfromRight)">
      <div class="item-right" :class="{ active: $route.name === routerRight }">
        {{ titleRight }}
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      titleLeft: '',
      titleRight: '',
      routerLeft: '',
      routerRight: '',
      cfromLeft: '',
      cfromRight: '',
      titleCenter: '',
      routerCenter: '',
    }
  },
  mounted() {
    if (this.title == 'card') {
      this.titleLeft = '企业名片'
      this.titleRight = '纸质名片'
      this.titleCenter = '个人名片'
      this.routerLeft = 'card'
      this.routerRight = 'paperCard'
      this.routerCenter = 'personalCard'
      this.cfromLeft = '2I6qM'
      this.cfromRight = '48Fps'
      return
    }
    if (this.title == 'poster') {
      this.titleLeft = '获客海报'
      this.titleRight = '名片码'
      this.routerLeft = 'posterList'
      this.routerRight = 'cardCode'
      this.cfromLeft = 'y6FDj'
      this.cfromRight = '3d8B1'
      return
    }
  },
  methods: {
    onCfrom(cfrom) {
      this.$setCfrom({
        cfrom: cfrom,
        ctype: 2,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.menu-card-box {
  display: flex;
  justify-content: center;
  padding: 0.27rem 0 0.33rem;
  background: #ffffff;
  &.card {
    padding: 0;
    height: 0.88rem;
    align-items: center;
    background-color: rgba(20, 90, 254, 1);
    a {
      flex: 1;
    }
    .item-left,
    .item-center,
    .item-right {
      width: 100%;
      height: 0.88rem;
      color: #ffffff;
      font-weight: 400;
      border: none;
      border-radius: 0;
      background: transparent;
    }
    .active {
      font-weight: 700;
      border: none;
      background: transparent;
      position: relative;
      &::after {
        content: '';
        width: 0.5rem;
        height: 0.04rem;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 1;
      }
    }
  }
  .item-left {
    width: 2rem;
    height: 0.56rem;
    border: 1px solid #2099fe;
    border-radius: 0.28rem 0px 0px 0.28rem;
    font-size: 0.28rem;
    font-weight: bold;
    text-align: center;
    color: #1a79fe;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .item-right {
    width: 2rem;
    height: 0.56rem;
    border: 1px solid #2099fe;
    border-radius: 0px 0.26rem 0.26rem 0px;
    font-size: 0.28rem;
    font-weight: bold;
    text-align: center;
    color: #1a79fe;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .item-center {
    width: 2rem;
    height: 0.56rem;
    border-top: 1px solid #2099fe;
    border-bottom: 1px solid #2099fe;
    font-size: 0.28rem;
    font-weight: bold;
    text-align: center;
    color: #1a79fe;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .active {
    border: none;
    background: linear-gradient(35deg, #145afe -8%, #76a0ff 161%);
    color: #ffffff;
  }
}
</style>
